@import "../../variable.less";
.@{prefix} {
  &-roll {
    width: 100%;
    height: 100%;
    overflow: auto;
    &.horizontal {
      .@{prefix}-roll-inner {
        display: flex;
        width: 100%;
        height: 100%;
        .@{prefix}-roll-item {
          height: 100%;
          max-width: 200px;
          overflow: hidden;
          position: relative;
          flex-shrink: 0;
        }
      }
    }
    &.vertical {
      .@{prefix}-roll-inner {
        .@{prefix}-roll-item {
          display: inline-block;
          width: 100%;
          position: relative;
        }
      }
    }
    &.horizontal {
      &::-webkit-scrollbar {
        height: 4px;
      }
    }
    &.vertical {
      &::-webkit-scrollbar {
        width: 4px;
      }
    }
    &::-webkit-scrollbar-thumb {
      background-color: #ccc;
    }
    &.leave {
      &::-webkit-scrollbar-thumb {
        visibility: hidden;
      }
    }
    &.enter {
      &::-webkit-scrollbar-thumb {
        visibility: visible;
      }
    }
    &.loop {
      overflow: hidden;
    }
  }
}